<template>
    <div class="container">
        <div class="input-box">
            <el-input v-model="inputValue" placeholder="请输入内容" />
            <!-- <slot>默认插槽</slot> -->
            <slot name="prepend"></slot>
            <!-- 是否匿名插槽主要看有没有name属性，
            如果有name属性，就是具名插槽，如果没有name属性，就是匿名插槽 -->
        </div>
        <div class="second-line">
            <p>标题为：<slot name="second-line-title">你想知道吗？</slot>
            </p>
        </div>
        <!-- 子组件向父组件传参，使用属性方式传参，如 :item="item" -->
        <div class="data-content">
            <!-- <ul>
                <li v-for="item in items" :key="item.id">
                    <slot :haha="item"></slot>
                </li>
            </ul> -->
            <ul>
                <li v-for="item in items" :key="item.id">
                    <slot name="custom" :haha="item">{{ item.name }}</slot>
                </li>
            </ul>
        </div>
        <!-- 动态插槽，也就是name是动态的，
        子组件中插槽名字也可以设置为动态的，父组件根据条件展示不同的内容 :name="item+'id'" -->
        <div>
            <slot :name="slotName">我是动态的插槽</slot>
            <!-- <button @click="toggleSlot">切换插槽</button> -->
        </div>
        <!-- <div v-if="$slots[dynamicSlotName]">
            <slot :name="dynamicSlotName"></slot>
        </div> -->
        <!-- 动态插槽容器 -->
        <div class="dynamic-area" v-if="$scopedSlots[dynamicSlotName]">
            <slot :name="dynamicSlotName" :item="slotData"></slot>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inputValue: '',
            items: [],
            slotName: 'header',//初始插槽名
            slotData: { title: '来自子组件的数据' }
        }

    },
    props: ['dynamicSlotName'],
    created() {
        //$slots只包含静态的插槽，动态的不包含
        //$scopedSlots包含动态的，但是也包含静态的？
        console.log('这是子组件', this.$slots,this);
        setTimeout(() => {
            this.getData();
        }, 3000);
    },
    methods: {
        getData() {
            this.items = [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
            ]
        },
        toggleSlot() {
            this.slotName = this.slotName === 'header' ? 'footer' : 'header'
            this.$emit('slot-change', this.slotName)
        }
    },

}

</script>
<style lang="scss" scoped>
.container {
    margin-bottom: 10px;
    .input-box {
        display: flex;
        align-items: center;

        .el-input {
            max-width: 200px;
        }
    }

}
</style>